To customize a banner for your dealership:

Edit index.html file to update preferred URL:
Expand the .zip archive to access the banner folder.  Open the “index.html” file with a text editor. Use the find and replace feature of the text editor to find “https://www.gradywhite.com” and replace it with the full URL of your choice "https://www.YOURWEBSITE.com".

Replace dealer.png file in folder with png of actual dealer logo. Do not change file name or size.
Your logo file must be 600px x 600px, png format, and named “dealer.png”.


Instructions for banner iframe embedding on site:
To embed an HTML5 banner into your website, use an HTML <iframe> tag. 
This keeps the banner's code isolated so it does not interfere with your main site's layout or scripts. 

1. Upload Banner Files
Upload your banner folder to your web server.
Note the absolute or relative URL to index.html.

2. Add the Code
Insert the following HTML code where you want the banner to appear:

<iframe 
  src="path/to/your/banner/index.html" 
  width="300" /* actual banner width */
  height="250" /* actual banner height */
  scrolling="no" 
  frameborder="0" 
  style="border: none; overflow: hidden;">
</iframe>


Alternative (JavaScript Tag): If you are using an ad server like Google Ad Manager, the platform will provide a specific JavaScript tag (or redirect tag) to paste into your website's header or ad slot instead of an iframe.


To embed an HTML5 banner into your Content Management System (CMS), you need to upload your asset files and place the correct reference code into your page editor.

Upload Files to Your CMS Media LibraryAccess media: Open your CMS dashboard and navigate to the media manager.Upload files: Upload the HTML file along with its image and JavaScript assets.

Copy URLs: 
Note down the absolute URL of the uploaded main HTML file.

Embed the Code via iFrame:
An iFrame is the safest method to prevent code conflicts between your banner and your website.

Open page: 
Edit the specific post or page where the banner belongs.

Switch view: 
Toggle your editor from the visual mode to the Text, HTML, or Code view.

Paste code: 
Insert the following iFrame code snippet:

<iframe 
  src="path/to/your/banner/index.html" 
  width="300" /* actual banner width */
  height="250" /* actual banner height */
  scrolling="no" 
  frameborder="0" 
  style="border: none; overflow: hidden;">
</iframe>

Adjust and SaveMatch dimensions: 
Change the width and height attributes to match your banner size.

Preview page: 
Check the live preview to ensure the layout displays correctly.Publish: Save your changes to make the banner live.


If you need assistance with customizing, embedding a banner, or creating a different Grady-White web banner please contact Igoe Creative at 252-355-8181.